<template>
    <div  class="wrapper-fixed">
        <div class="action-bar-wrapper">
            <el-col :span="24" class="action-bar">
            <el-input v-model="searchText" placeholder="用户姓名或手机号" style="width:300px"></el-input>
            <el-select v-model="authStatusOption"  clearable placeholder="审核状态" style="margin:0 20px;">
                <el-option
                v-for="item in authStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <el-button type="primary" size="medium" @click="search">检索</el-button>
                <!-- <el-button type="primary" size="medium" @click="toVipCompanyEditor('')">添加</el-button> -->
            </el-col>
        </div>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            v-loading="tableLoadingShow"
            element-loading-text="拼命加载中"
            style="width: 100%">
            <el-table-column
                label="头像"
                width="100">
                <template slot-scope="scope">
                    <div>
                        <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="realname"
                label="真实名字"
                show-overflow-tooltip
                width="100"
                >
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机"
                show-overflow-tooltip
                width="100"
                >
            </el-table-column>
            <el-table-column
                prop="unit_name"
                label="所在单位"
                show-overflow-tooltip
                width="180">
                <!-- <template  slot-scope="scope" v-if="scope.row.user_info">

                    <div @click.stop="showConsultation(scope.row)" style="cursor:pointer;color:#409EFF">{{scope.row.realname?scope.row.realname:scope.row.nickname}}</div>
                </template> -->
            </el-table-column>

            <el-table-column
                prop="position"
                label="职称"
                show-overflow-tooltip
                width="120"
                >
            </el-table-column>
            <el-table-column
                prop="status_name"
                label="城市"
                show-overflow-tooltip
                width="180"
                >
                <template slot-scope="scope">
                    <div>
                        {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="status_name"
                label="专家标签"
                show-overflow-tooltip
                width="100"
                >
                <template  slot-scope="scope" >
                    <el-button type="primary" size="mini" @click="showLicense(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="提交时间"
                show-overflow-tooltip
                width="150"
                >
            </el-table-column>
            <el-table-column
                prop="status_name"
                label="审核状态"
                show-overflow-tooltip
                width="150"
                >
                <template slot-scope="scope" >
                    <div>
                        <el-tag v-show="scope.row.is_auth==0">未审核</el-tag>
                        <el-tag type="success" v-show="scope.row.is_auth==1">已通过</el-tag>
                        <el-tag type="warning" v-show="scope.row.is_auth==2">已拒绝</el-tag>
                        <el-tag type="danger" v-show="scope.row.is_auth==3">已注销</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="查看详情" width='100'>
                <template slot-scope="scope">
                    <el-button type='primary'  size="mini"  @click="showConsultation(scope.row.id)" >查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="审核" width='150'>
                <template slot-scope="scope">
                    <el-button type='primary' v-if="scope.row.is_auth==0" size="mini"  @click="passApplication(scope.row.id)" >通过</el-button>
                    <el-button type='danger' v-if="scope.row.is_auth==0" size="mini" @click="showDenyDialog(scope.row.id)" >拒绝</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-col :span="24" class="footer-bar">
            <div class="page-code">
                <el-pagination
                    background
                    :page-size="16"
                    layout="prev, pager, next"
                    :total="totalPage"
                    @current-change="pageChange"
                        >
                </el-pagination>
            </div>
        </el-col>
    <!-- 列表end -->


    <!-- 详细信息 -->
		<el-dialog title="详细信息" :visible.sync="consultationVisible" @close="initData">
            <el-form :label-position="'left'" label-width="150px" >
                <el-form-item label="logo" >
                    <div> <img :src="expertDetail.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
                </el-form-item>
                <el-form-item label="真实姓名" >
                    <div>{{expertDetail.realname}}</div>
                </el-form-item>
                <el-form-item label="手机" >
                    <div>{{expertDetail.phone}}</div>
                </el-form-item>
                <el-form-item label="所在单位" >
                    <div>{{expertDetail.unit_name}}</div>
                </el-form-item>

                <el-form-item label="职称" >
                    <div>{{expertDetail.position}}</div>
                </el-form-item>
                <el-form-item label="城市" >
                    <div>{{expertDetail.province}}{{expertDetail.city}}{{expertDetail.area}}{{expertDetail.address}}</div>
                </el-form-item>
                <el-form-item label="专家标签" >
                    <div class="tag-wrapper">
                        <span v-for="(item,index) of expertDetail.expert_label" :key="index">{{item}}</span>
                    </div>
                </el-form-item>
                <el-form-item label="擅长领域" >
                    <div>{{expertDetail.strengths}}</div>
                </el-form-item>
                <el-form-item label="资质证明" >
                    <div >
                        <el-image
                        style="width: 150px; height: 150px;margin:10px"
                        :fit="'cover'"
                        :src="item.img_url"
                        v-for="(item,index) of expertDetail.expert_qualification_img" :key="index"
                        :preview-src-list="expertDetail.expert_qualification_img.map(item=>{return item.img_url})">
                    </el-image>
                        <!-- <img style="width:150px;height:150px;objectFit:cover;margin:10px" :src="item.img_url" alt="" v-for="(item,index) of expertDetail.expert_qualification_img" :key="index"> -->
                    </div>
                </el-form-item>
                <el-form-item label="提交时间" >
                    <div>{{expertDetail.created_at}}</div>
                </el-form-item>
                <el-form-item label="审核状态" >
                    <div>
                        <el-tag v-show="expertDetail.is_auth==0">未审核</el-tag>
                        <el-tag type="success" v-show="expertDetail.is_auth==1">已通过</el-tag>
                        <el-tag type="info" v-show="expertDetail.is_auth==2">已拒绝</el-tag>
                        <el-tag type="danger" v-show="expertDetail.is_auth==3">已注销</el-tag>
                    </div>
                </el-form-item>


            </el-form>
		</el-dialog>
        <!-- 详细信息end -->

        <!-- 专家标签 -->
        <el-dialog title="专家标签" :visible.sync="licenseVisible" @close="initData">
            <div class="tag-wrapper">
                <span v-for="(item,index) of tagList" :key="index">{{item}}</span>
            </div>
        </el-dialog>
        <!-- 专家标签end -->

      <!-- 拒绝弹出框end -->
      <el-dialog title="是否拒绝该认证申请？" :visible.sync="denyDialogShow" @close="denyDialogShow = false">
        <el-form>
          <el-form-item>
            <el-input v-model="denyMessage" placeholder="请填写拒绝理由（选填）"/>
          </el-form-item>
          <el-form-item>
            <el-button type="waring" @click="denyApplication">确定</el-button>
            <el-button type="primary" @click="denyDialogShow = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 拒绝弹出框end -->
    </div>
</template>
<script>
export default {
    name:'member',
    props: {
      testFlag: false
    },
    data() {
        return {
            consultationVisible:false,//查看详细信息状态
            goodAtVisible:false,
            licenseVisible:false,

            searchText:'',
            userAuthId:'',//选中的用户id

            authStatusOption:'',//头部筛选认证状态
            authStatusOptions:[
                {label:'全部',value:-1},
                {label:'待处理',value:0},
                {label:'通过',value:1},
                {label:'拒绝',value:2}

            ],
            tagList:'',
            expertDetail:{},
            tableData: [{}],
            page:1,
            totalPage:0,
            linkId: '',
            tableLoadingShow: false,
            denyDialogShow:false, //审核拒绝弹窗
            denyMessage:"",
            denyPersonId:""
        }
    },
    methods: {
        //弹窗显示审核拒绝时填写内容
        showDenyDialog(id) {
          this.denyDialogShow = true;
          this.denyMessage = "";
          this.denyPersonId = id;
        },
        search(){
            this.tableLoadingShow = true;
            this.page=1;
            this.getExpertAuthList()
        },
        async getExpertAuthList(){
            //获取会员列表
            let params={
                page:this.page,
                limit:16,
                keyword:this.searchText,
                is_auth:this.authStatusOption==-1?'':this.authStatusOption,
                id: this.linkId
            }
            let res=await this.$api.getExpertAuthList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
          this.tableLoadingShow = false;
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getExpertAuthList();
        },
        async deletApplication(id){
            //删除
            let judge=null;
            let tit='删除该入驻申请?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
        },
        async passApplication(id){
            //通过审核
            let judge=null;
            let tit='通过该申请?';
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge=='confirm'){
                this.changeExpertAuthStatus(id)
            }
            console.log(judge)
        },
        async denyApplication(id){
        //     //拒绝审核
        //     let judge=null;
        //     let tit='拒绝该申请?';
        //     try {
        //       judge=  await this.$confirm(tit, '提示', {
				// confirmButtonText: '确定',
				// cancelButtonText: '取消',
				// type: 'warning'
        //         })
        //     } catch (error) {
        //         judge='cancel'
        //     }
        //     if(judge=='confirm'){
        //         this.changeExpertAuthStatus(id,'refusal')
        //     }
        //     console.log(judge)

          let params={
            id:this.denyPersonId,
            type:'refusal',
            msg:this.denyMessage
          }
          let res =await this.$api.changeExpertAuthStatus(params)
          if(res.data.level=='success'){
            this.$message.success(res.data.message);
            this.denyDialogShow = false;
            this.getExpertAuthList()
          }else{
            this.$message.error(res.data.message);
          }
        },
        async changeExpertAuthStatus(id,type){
            let params={
                id:id,
                type:type
            }
            let res =await this.$api.changeExpertAuthStatus(params)
            if(res.data.level=='success'){
                this.$message.success(res.data.message);
                this.getExpertAuthList()
            }else{
                this.$message.error(res.data.message);
            }
        },
        showLicense(scope){
            //显示在职证明
            this.tagList=scope.expert_label
            this.licenseVisible=true;
        },
        async showConsultation(id){
            //显示详情信息
            let res=await this.$api.getExpertDetail({id:id})
            if(res.data.level=='success'){
                this.expertDetail=res.data.data;
                this.consultationVisible=true
            }else{
                this.$message.error(res.data.message)
            }
        },
        initData(){

        }

    },
    mounted() {
        this.getExpertAuthList()
    },

  created() {
    this.linkId = this.$route.query.expertLinkId;
  },

  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      this.linkId = this.$route.query.expertLinkId;
      if(this.linkId){
        this.getExpertAuthList();
      }
    },
    'testFlag':function (val) {
      this.linkId = '';
      this.getExpertAuthList();
    }
  }
}
</script>
<style lang="scss" scoped>
    .screen{
          margin-top: -10px !important;
      }
      .action-bar-wrapper{
          position: sticky;
            z-index: 1;
            top:-20px;
      }
    .action-bar{
			background-color: #f2f2f2;

			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
        .tag-wrapper{
            span{
                padding:20px
            }
        }


</style>
